<style>
    .layui-layer.layui-layer-adminRight {
        overflow-x: hidden;
    }

    .tpl-theme .layui-card-body {
        padding: 0;
    }

    .theme-div {
        padding-left: 15px;
        padding-top: 20px;
        margin-bottom: 10px;
    }

    .btnTheme {
        display: inline-block;
        margin: 0 6px 15px 0;
        padding: 4px;
        border: 1px solid #fff;
    }

    .btnTheme img {
        width: 80px;
        height: 50px;
        border: 1px solid #f2f2f2;
        background: #F2F2F2;
        cursor: pointer;
    }

    .btnTheme:hover, .btnTheme.active {
        border-color: #5FB878;
    }

    .more-menu-item {
        display: block;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border-bottom: 1px solid #e8e8e8;
        color: #333;
        padding: 0px 25px;
        font-style: normal;
    }

    .more-menu-item:first-child {
        border-top: 1px solid #e8e8e8;
    }

    .more-menu-item:hover {
        background: #F2F2F2;
        color: #333;
    }

    .more-menu-item .layui-icon {
        padding-right: 10px;
        font-size: 18px;
    }

    .more-menu-item:after {
        content: "\e602";
        font-family: layui-icon !important;
        position: absolute;
        right: 16px;
        color: #999;
    }

    .more-menu-item.no-icon:after {
        content: "";
    }

    /** 设置表单样式 */
    .set-item-label {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        padding-left: 20px;
        color: #333333;
    }

    .set-item-ctrl {
        display: inline-block;
        height: 38px;
        line-height: 38px;
    }

    .set-item-ctrl > * {
        margin: 0;
    }
</style>

<div class="layui-card-header">设置主题</div>
<div class="layui-card-body tpl-theme" style="padding: 0;">
    <!-- 主题列表 -->
    <div class="theme-div"></div>

    <!-- 导航 -->
    <div class="more-menu-list">
        <a class="more-menu-item" href="https://whvse.gitee.io/easyweb-html/spa/" target="_blank">
            <i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档
        </a>
        <a class="more-menu-item" href="https://demo.easyweb.vip/iframe" target="_blank">
            <i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> &nbsp;iframe版本
        </a>
        <a class="more-menu-item" href="https://demo.easyweb.vip/theme" target="_blank">
            <i class="layui-icon layui-icon-theme"></i> 主题生成器
        </a>
    </div>

    <!-- 控制开关 -->
    <div class="layui-form" style="margin: 25px 0;">
        <div class="layui-form-item">
            <label class="set-item-label">页&emsp;脚：</label>
            <div class="set-item-ctrl" style="margin-right: 15px;">
                <input id="setFooter" lay-filter="setFooter" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
            </div>
            <label class="set-item-label" style="width: auto;">多标签：</label>
            <div class="set-item-ctrl">
                <input id="setTab" lay-filter="setTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="set-item-label">导航小三角：</label>
            <div class="set-item-ctrl">
                <input lay-filter="navArrow" type="radio" value="" title="默认" name="navArrow">
                <input lay-filter="navArrow" type="radio" value="arrow2" title="箭头" name="navArrow">
                <input lay-filter="navArrow" type="radio" value="arrow3" title="加号" name="navArrow">
            </div>
        </div>
    </div>

</div>
<script>
    layui.use(['layer', 'config', 'form', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var form = layui.form;
        var admin = layui.admin;
        var leftNav = '.layui-layout-admin>.layui-side>.layui-side-scroll>.layui-nav';

        var themes = [
            {title: '黑白主题', theme: 'admin'},
            {title: '黑色主题', theme: 'black'},
            {title: '蓝色主题', theme: 'blue'},
            {title: '藏青主题', theme: 'cyan'},
            {title: '黄色主题', theme: 'yellow'},
            {title: '绿色主题', theme: 'green'},
            {title: '粉红主题', theme: 'pink'},
            {title: '紫白主题', theme: 'purple-white'},
            {title: '紫色主题', theme: 'purple'},
            {title: '白色主题', theme: 'white'},
            {title: '红白主题', theme: 'red-white'},
            {title: '红色主题', theme: 'red'}
        ];
        for (var i = 0; i < themes.length; i++) {
            var str = '<div class="btnTheme" theme="theme-' + themes[i].theme + '" title="' + themes[i].title + '">';
            str += '      <img src="assets/module/theme/img/theme-' + themes[i].theme + '.png">';
            str += '   </div>';
            $('.theme-div').append(str)
        }

        // 切换主题
        var mTheme = layui.data(config.tableName).theme;
        $('.btnTheme[theme=' + (mTheme ? mTheme : config.defaultTheme) + ']').addClass('active');
        $('.btnTheme').click(function () {
            $('.btnTheme').removeClass('active');
            $(this).addClass('active');
            admin.changeTheme($(this).attr('theme'));
        });

        // 关闭/开启页脚
        var openFooter = layui.data(config.tableName).openFooter;
        $('#setFooter').prop('checked', openFooter == undefined ? true : openFooter);
        form.on('switch(setFooter)', function (data) {
            var checked = data.elem.checked;
            layui.data(config.tableName, {key: 'openFooter', value: checked});
            checked ? $('body.layui-layout-body').removeClass('close-footer') : $('body.layui-layout-body').addClass('close-footer');
        });

        // 关闭/开启多标签
        var openTab = layui.data(config.tableName).openTab;
        $('#setTab').prop('checked', openTab == undefined ? config.pageTabs : openTab);
        form.on('switch(setTab)', function (data) {
            var checked = data.elem.checked;
            layui.data(config.tableName, {key: 'openTab', value: checked});
            location.reload();
        });

        // 导航小三角
        var navArrow = layui.data(config.tableName).navArrow;
        $('[name="navArrow"][value="' + (navArrow ? navArrow : '') + '"]').prop('checked', 'true');
        form.on('radio(navArrow)', function (data) {
            layui.data(config.tableName, {key: 'navArrow', value: data.value});
            top.layui.jquery(leftNav).removeClass('arrow2 arrow3');
            data.value && top.layui.jquery(leftNav).addClass(data.value);
        });

        form.render('checkbox');
        form.render('radio');
    });
</script>